<template>
    <div class="loginContain">
        <div class="containerHeader" :style="containerHeaderStyle">
            <img src="@/assets/logo.png" class="containerHeaderImage"  alt=""/>
            <span class="titleContainer">YWU 一站式应用管理</span>
        </div>
        <div class="containerCard">
            <el-card v-for="(rowItem) in siteInfoList" shadow="hover" class="cardItem" @click="cardClick(rowItem)">
                <p class="innerPClass"> {{ rowItem["routeRootCnName"] }} </p>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts" name="YwuRouteIndex">
import { queryMenuSiteInfo } from "@/request/menu";
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from 'vue-router'
// 路由跳转操作
const router = useRouter()

let siteInfoList = ref([])

function cardClick(item) {
    let routePath = item["routeMenuHome"];
    if (item["routePathParam"]) {
        routePath += "?" + item["routePathParam"]
    }
    // 跳转至路由文根的首页
    router.push(routePath).then(()=>{});
}

// 查询当前用户下的所有可跳转的站点文根
let param = {}
queryMenuSiteInfo(param).then(res => {
    siteInfoList.value = res.data
})

// 计算最外层的div的宽高
let containerHeaderStyle = ref("width: 100%; height: 30%");

const handleResize = () => {
    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;
    let realWidth = "100%";
    let realHeight = "30%"
    if (windowWidth < 500) {
        realWidth = "500px";
    }
    if (windowHeight < 600) {
        realHeight = "200px";
    }
    containerHeaderStyle.value = "width: " + realWidth + "; " + "height: " + realHeight;
};

onMounted(() => {
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
});
</script>

<style scoped lang="less">
.loginContain {
    width: 100%;
    height: 100vh;
    background-image: url("@/assets/login/loginBackground.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    //去除光标
    caret-color: transparent;
    .containerHeader {
        display: flex;
        align-items: center;
        justify-content: center;
        .containerHeaderImage {
            width: 130px;
            height: 120px;
            margin-right: 5%;
        }
        .titleContainer {
            font-size: 30px;
            color: rgb(84, 34, 34);
            font-weight: bold;
        }
    }
    .containerCard {
        width: 60%;
        padding-left: 20%;
        padding-right: 20%;
    }
    .cardItem {
        display: inline-block;
        width: 350px;
        margin-right: 20px;
        margin-bottom: 20px;
        .innerPClass {
            white-space: nowrap;      /* 禁止换行 */
            overflow: hidden;         /* 溢出内容隐藏 */
            text-overflow: ellipsis;  /* 溢出内容显示为省略号 */
            width: 95%;             /* 需要指定宽度 */
        }
    }
    .cardItem:hover {
        cursor: pointer;
    }
}
</style>